```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nginx 请求转发与重写指南 | 技术小馆</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        h1, h2, h3, h4 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
            color: #1a202c;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .code-block {
            background-color: #2d3748;
            color: #e2e8f0;
            border-left: 4px solid #667eea;
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }
        .highlight-item {
            transition: all 0.3s ease;
        }
        .highlight-item:hover {
            background-color: #f7fafc;
            transform: translateX(5px);
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <header class="hero-gradient text-white py-20 px-4 sm:px-6 lg:px-8">
        <div class="max-w-4xl mx-auto text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">Nginx 请求动态转发与重写</h1>
            <p class="text-xl md:text-2xl opacity-90 mb-8">掌握高级配置技巧，构建灵活高效的Web服务</p>
            <div class="flex justify-center space-x-4">
                <a href="#basic-concepts" class="bg-white text-indigo-700 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium transition duration-300">
                    <i class="fas fa-book mr-2"></i>核心概念
                </a>
                <a href="#config-examples" class="bg-indigo-800 hover:bg-indigo-900 text-white px-6 py-3 rounded-lg font-medium transition duration-300">
                    <i class="fas fa-code mr-2"></i>配置示例
                </a>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <main class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <!-- Introduction -->
        <section class="mb-16">
            <div class="bg-white rounded-xl shadow-md overflow-hidden p-8">
                <p class="text-lg text-gray-700 mb-6">
                    在Nginx中实现请求的动态转发和重写，可以通过配置<code class="bg-gray-100 px-2 py-1 rounded">location</code>块中的<code class="bg-gray-100 px-2 py-1 rounded">rewrite</code>指令和<code class="bg-gray-100 px-2 py-1 rounded">proxy_pass</code>指令来完成。这些功能使得Nginx可以根据不同的条件动态地转发请求到不同的后端服务或修改请求的URL。
                </p>
            </div>
        </section>

        <!-- Basic Concepts -->
        <section id="basic-concepts" class="mb-16">
            <h2 class="text-3xl font-bold mb-8 flex items-center">
                <span class="bg-indigo-100 text-indigo-800 w-10 h-10 rounded-full flex items-center justify-center mr-4">1</span>
                基本概念
            </h2>
            
            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="bg-blue-100 text-blue-800 p-3 rounded-full mr-4">
                                <i class="fas fa-random text-xl"></i>
                            </div>
                            <h3 class="text-xl font-bold">动态转发 (Dynamic Forwarding)</h3>
                        </div>
                        <p class="text-gray-700">根据请求的内容或其他条件将请求转发到不同的后端服务器，实现灵活的流量分配和服务路由。</p>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="bg-purple-100 text-purple-800 p-3 rounded-full mr-4">
                                <i class="fas fa-route text-xl"></i>
                            </div>
                            <h3 class="text-xl font-bold">URL 重写 (URL Rewriting)</h3>
                        </div>
                        <p class="text-gray-700">修改请求的URL，通常用于改变请求路径或查询参数，以便请求可以正确地被后端服务处理。</p>
                    </div>
                </div>
            </div>

            <!-- Concept Diagram -->
            <div class="bg-white rounded-xl shadow-md overflow-hidden p-6 mb-8">
                <h3 class="text-xl font-bold mb-6 flex items-center">
                    <i class="fas fa-project-diagram text-indigo-600 mr-3"></i>
                    Nginx请求处理流程
                </h3>
                <div class="mermaid">
                    graph LR
                    A[客户端请求] --> B[Nginx服务器]
                    B --> C{条件判断}
                    C -->|匹配规则1| D[重写URL]
                    C -->|匹配规则2| E[转发到服务A]
                    C -->|匹配规则3| F[转发到服务B]
                    D --> G[处理后端请求]
                    E --> G
                    F --> G
                    G --> H[返回响应]
                </div>
            </div>
        </section>

        <!-- Configuration Examples -->
        <section id="config-examples" class="mb-16">
            <h2 class="text-3xl font-bold mb-8 flex items-center">
                <span class="bg-indigo-100 text-indigo-800 w-10 h-10 rounded-full flex items-center justify-center mr-4">2</span>
                请求转发和重写的配置
            </h2>

            <!-- Dynamic Forwarding -->
            <div class="mb-12">
                <h3 class="text-2xl font-bold mb-6 flex items-center">
                    <i class="fas fa-exchange-alt text-blue-600 mr-3"></i>
                    动态转发配置
                </h3>
                <p class="text-gray-700 mb-6">动态转发涉及根据请求的URL或其他请求属性，将请求转发到不同的后端服务。可以使用Nginx的<code class="bg-gray-100 px-2 py-1 rounded">proxy_pass</code>指令进行动态转发。</p>
                
                <div class="code-block rounded-lg overflow-hidden mb-6">
                    <pre class="p-4 overflow-x-auto"><code class="language-nginx">server {
    listen 80;
    server_name demo.com;

    location /api/ {
        # 动态转发到不同的后端服务
        if ($arg_service = 'service1') {
            proxy_pass http://backend_service1;
        }
        if ($arg_service = 'service2') {
            proxy_pass http://backend_service2;
        }
    }
}</code></pre>
                </div>

                <div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-6">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-info-circle text-blue-500 mt-1"></i>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm text-blue-700">
                                <span class="font-bold">配置说明:</span> 此配置根据请求的查询参数<code>service</code>的值动态选择后端服务。<code>$arg_service</code>获取名为service的查询参数，根据其值将请求转发到不同的后端。
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- URL Rewriting -->
            <div class="mb-12">
                <h3 class="text-2xl font-bold mb-6 flex items-center">
                    <i class="fas fa-pen-fancy text-purple-600 mr-3"></i>
                    URL 重写配置
                </h3>
                <p class="text-gray-700 mb-6">URL重写用于修改请求的URL。使用<code class="bg-gray-100 px-2 py-1 rounded">rewrite</code>指令可以将请求的URL修改为新的格式，并重新定向到相应的处理逻辑。</p>
                
                <div class="code-block rounded-lg overflow-hidden mb-6">
                    <pre class="p-4 overflow-x-auto"><code class="language-nginx">server {
    listen 80;
    server_name demo.com;

    location / {
        # 将 /old-path/ 重写为 /new-path/
        rewrite ^/old-path/(.*)$ /new-path/$1 last;
        
        # 动态转发到后端服务
        proxy_pass http://backend;
    }
}</code></pre>
                </div>

                <div class="bg-purple-50 border-l-4 border-purple-400 p-4 mb-6">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-info-circle text-purple-500 mt-1"></i>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm text-purple-700">
                                <span class="font-bold">配置说明:</span> <code>rewrite ^/old-path/(.*)$ /new-path/$1 last;</code>将所有以<code>/old-path/</code>开头的请求重写为<code>/new-path/</code>，并保留原始的路径部分。<code>last</code>标记表示重写后的请求会停止进一步的重写处理。
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Complex Example -->
            <div>
                <h3 class="text-2xl font-bold mb-6 flex items-center">
                    <i class="fas fa-cogs text-indigo-600 mr-3"></i>
                    复杂的URL重写和条件配置
                </h3>
                <p class="text-gray-700 mb-6">在更复杂的场景下，您可能需要结合使用<code class="bg-gray-100 px-2 py-1 rounded">rewrite</code>指令和条件判断来实现更细粒度的控制。</p>
                
                <div class="code-block rounded-lg overflow-hidden mb-6">
                    <pre class="p-4 overflow-x-auto"><code class="language-nginx">server {
    listen 80;
    server_name demo.com;

    # 重写请求并转发到不同的后端
    location / {
        # 根据用户代理 (User-Agent) 动态决定转发目标
        if ($http_user_agent ~* 'mobile') {
            rewrite ^/app/(.*)$ /mobile-app/$1 last;
            proxy_pass http://mobile_backend;
        }
        if ($http_user_agent ~* 'desktop') {
            rewrite ^/app/(.*)$ /desktop-app/$1 last;
            proxy_pass http://desktop_backend;
        }
    }
}</code></pre>
                </div>

                <div class="grid md:grid-cols-2 gap-6">
                    <div class="bg-indigo-50 border-l-4 border-indigo-400 p-4">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <i class="fas fa-mobile-alt text-indigo-500 mt-1"></i>
                            </div>
                            <div class="ml-3">
                                <p class="text-sm text-indigo-700">
                                    <span class="font-bold">移动端处理:</span> 当检测到移动设备User-Agent时，将<code>/app/</code>路径重写为<code>/mobile-app/</code>并转发到移动端专用后端服务。
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="bg-indigo-50 border-l-4 border-indigo-400 p-4">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <i class="fas fa-desktop text-indigo-500 mt-1"></i>
                            </div>
                            <div class="ml-3">
                                <p class="text-sm text-indigo-700">
                                    <span class="font-bold">桌面端处理:</span> 当检测到桌面设备User-Agent时，将<code>/app/</code>路径重写为<code>/desktop-app/</code>并转发到桌面端专用后端服务。
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Considerations -->
        <section class="mb-16">
            <h2 class="text-3xl font-bold mb-8 flex items-center">
                <span class="bg-indigo-100 text-indigo-800 w-10 h-10 rounded-full flex items-center justify-center mr-4">3</span>
                注意事项
            </h2>

            <div class="grid md:grid-cols-3 gap-6">
                <div class="bg-white rounded-lg shadow-sm p-6 highlight-item">
                    <div class="flex items-center mb-3">
                        <div class="bg-red-100 text-red-600 p-2 rounded-full mr-3">
                            <i class="fas fa-tachometer-alt"></i>
                        </div>
                        <h3 class="text-lg font-bold">性能影响</h3>
                    </div>
                    <p class="text-gray-700 text-sm">过多的<code>if</code>指令和复杂的重写规则可能会影响性能，尤其是在高并发环境下。请谨慎使用，并测试性能影响。</p>
                </div>
                
                <div class="bg-white rounded-lg shadow-sm p-6 highlight-item">
                    <div class="flex items-center mb-3">
                        <div class="bg-yellow-100 text-yellow-600 p-2 rounded-full mr-3">
                            <i class="fas fa-sort-amount-down"></i>
                        </div>
                        <h3 class="text-lg font-bold">重写规则顺序</h3>
                    </div>
                    <p class="text-gray-700 text-sm">Nginx的<code>rewrite</code>指令处理是基于配置文件的顺序的，确保重写规则的顺序正确，以避免意外的行为。</p>
                </div>
                
                <div class="bg-white rounded-lg shadow-sm p-6 highlight-item">
                    <div class="flex items-center mb-3">
                        <div class="bg-green-100 text-green-600 p-2 rounded-full mr-3">
                            <i class="fas fa-bug"></i>
                        </div>
                        <h3 class="text-lg font-bold">调试和日志</h3>
                    </div>
                    <p class="text-gray-700 text-sm">使用<code>access_log</code>和<code>error_log</code>指令来记录和调试重写和转发的行为，便于排查问题。</p>
                </div>
            </div>
        </section>

        <!-- Best Practices -->
        <section class="bg-indigo-50 rounded-xl p-8 mb-16">
            <h2 class="text-2xl font-bold mb-6 flex items-center text-indigo-800">
                <i class="fas fa-star mr-3"></i>
                最佳实践建议
            </h2>
            
            <div class="space-y-4">
                <div class="flex items-start">
                    <div class="flex-shrink-0 h-6 w-6 text-indigo-600 mt-1">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <p class="ml-3 text-gray-700">尽量使用<code>location</code>匹配而不是<code>if</code>判断，因为<code>if</code>在某些上下文中可能有性能问题</p>
                </div>
                <div class="flex items-start">
                    <div class="flex-shrink-0 h-6 w-6 text-indigo-600 mt-1">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <p class="ml-3 text-gray-700">对于简单的重定向，考虑使用<code>return</code>指令而不是<code>rewrite</code>，它更高效</p>
                </div>
                <div class="flex items-start">
                    <div class="flex-shrink-0 h-6 w-6 text-indigo-600 mt-1">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <p class="ml-3 text-gray-700">使用正则表达式时应尽量精确，避免过于宽泛的匹配</p>
                </div>
                <div class="flex items-start">
                    <div class="flex-shrink-0 h-6 w-6 text-indigo-600 mt-1">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <p class="ml-3 text-gray-700">在测试环境中充分测试重写规则，确保不会导致无限重定向循环</p>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-300 py-12 px-4 sm:px-6 lg:px-8">
        <div class="max-w-6xl mx-auto">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <h3 class="text-xl font-bold text-white mb-2">技术小馆</h3>
                    <p class="text-gray-400">专注于分享Web技术与最佳实践</p>
                </div>
                <div>
                    <a href="http://www.yuque.com/jtostring" class="text-indigo-400 hover:text-indigo-300 transition duration-300 inline-flex items-center">
                        <i class="fas fa-external-link-alt mr-2"></i>
                        http://www.yuque.com/jtostring
                    </a>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-sm text-gray-500">
                <p>© 2023 技术小馆. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script>
        // Initialize Mermaid
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>
```